<template>
	<view class="bf">
		<u-tag v-if="isCurrent" class="u-m-l-20 bf-tag" mode="dark" text="当前提货点" type="error" size="mini"></u-tag>
		<view class="u-p-20 bf-current-location" @click="changePickUpLocation(location.id)" :class="{selected}">
			<u-image class="bf-current-location-img" width="150rpx" height="150rpx" border-radius="10rpx"
				:src="location.storePath"></u-image>
			<view class="bf-current-location-msg u-m-l-20 u-m-r-20">
				<view class="bf-current-location-msg-title u-m-b-5">
					{{location.takeName}}
				</view>
				<view class="bf-current-location-msg-distance-address u-m-t-5">
					<text v-if="location.distance" class="bf-current-location-msg-distance u-font-xs u-m-r-20">
						距离最近：{{location.distance}}km</text>
					<text class="bf-current-location-msg-address u-font-xs">
						{{location.detailAddress}}</text>
				</view>
			</view>
			<block v-if="showRadio">
				<view class="gg-current-location-btn" v-if="isCurrent">
					<u-icon name="checkmark-circle-fill" color="#fa3534" size="40" />
				</view>
				<view class="gg-current-location-btn" v-else>
					<u-icon name="checkmark-circle-fill" size="40" color="grey" />
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	export default {
		name: "PickUpLocationItem",
		props: {
			location: {
				type: Object,
				default: () => {
					return {}
				}
			},
			showRadio: {
				type: Boolean,
				default: true
			},
			selected: {
				type: Boolean,
				default: false,
			},
			isCurrent: {
				type: Boolean,
				default: true,
			},

		},
		data() {
			return {

			};
		},
		methods: {
			changePickUpLocation(id) {
				// 触发父元素上的自定义事件 再通过父元素调用仓库的action
				// console.log(id);
				 this.$emit("selectPickUpLocation", id)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.selected {
	  background-color: #FCBD71 !important;
	}
	.bf{
		position: relative;
		&-current-location {
			display: flex;
			background-color: $u-type-info-light;
			border-radius: 20rpx;
		
			&-tag {
				position: absolute;
				z-index: 9999;
			}
		
			&-msg {
				flex: 1;
		
				&-title {
					font-weight: bold;
				}
		
				&-distance {
					color: $u-type-error;
				}
		
				&-address {
					color: $u-type-info;
				}
			}
		
			&-btn {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
			}
		}
	}
	
</style>
